<template>
    <div class="store">
        <Header title="店铺"></Header>
        <div class="content">
            <div class="img"></div>
            <div class="foodSort">
                <div class="name">
                    {{title}}
                </div>
                <img :src="img" alt="">
            </div>
            <van-tabs color="#ffc400">
                <van-tab :title="item.name" v-for="(item,index) in storeData" :key="index">{{item.name}}</van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
import {reactive, toRefs} from 'vue'
import Header from '../../components/Header.vue'
export default {
    components: {
        Header
    },
    setup(){
        let data = reactive({
            storeData: [
                {name: '点菜'},
                {name: '评价'},
                {name: '商家'},
            ],
            title: "鱼鱼酸菜鱼",
            img: "https://qcloud.dpfile.com/pc/xvVFaUKvzqZP8LbetnKKqGK2oEjaVywaoMVIktdS-9-O5ihcD_VBGZYOXoBM64tvTYGVDmosZWTLal1WbWRW3A.jpg"
        })
        return {
            ...toRefs(data)
        }
    }
}
</script>
<style lang="less" scoped>
    .store{
        height: 100%;
        display: flex;
        flex-flow: column;
        .content{
            flex: 1;
            overflow: auto;
            .img{
                height: 100px;
                background: #ffc400 url("@/assets/img/06.png") no-repeat;
                background-size: 100% 100%;
            }
            .foodSort{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 20x;
                .name{
                    font-size: 20px;
                    font-weight: 600;
                }
                img{
                    width: 100px;
                    height: 80px;
                }
            }
        }
    }
</style>